<template>
  <el-dialog v-model="dialogVisible" title="编辑" class="full" fullscreen destroy-on-close>
    <div class="qyui-cell col qyui-container">
      <div class="qyui-cell row">
        <div class="bdb">
          <el-button @click="changePage('A3')">
            A3
          </el-button>
          <el-button @click="changePage('A4')">
            A4
          </el-button>
          <el-button @click="changePage('A5')">
            A5
          </el-button>
          <el-button @click="changePage('B3')">
            B3
          </el-button>
          <el-button @click="changePage('B4')">
            B4
          </el-button>
          <el-button @click="changePage('B5')">
            B5
          </el-button>
          宽/mm
          <el-input v-model="formData.customizeWidth" style="width:80px;" placeholder="宽/mm"></el-input>

          高/mm   <el-input v-model="formData.customizeHeight" style="width:80px;" placeholder="高/mm"></el-input>

          横版 <el-switch v-model="formData.isBanner">
          </el-switch>
          是否套打<el-switch v-model="manager.DoesCustomizePrint"></el-switch>
        </div>
        <div class="qyui-cell row qyui-container " style="align-items:center;background-color:#dadce0">
          <div class="pd20">
            <div class="page" :style="calcPageSize" style="background-color:#fff;position:relative">
              <div :style="topPadding"></div>
              <div :style="bottomPadding"></div>
              <div :style="leftPadding"></div>
              <div :style="rightPadding"></div>

              <div class="pageitem" :style="calcPageContent">
                可视宽度({{ manager.Page.PageWidth-manager.Page.MarginLeft-manager.Page.MarginRight }})=页面宽度({{ manager.Page.PageWidth }})-左边距({{ manager.Page.MarginLeft }})-右边距({{ manager.Page.MarginRight }})

                <div>
                  缩放比例 =可视宽度({{ manager.PageWidth-manager.Page.MarginLeft-manager.Page.MarginRight }}) /交互宽度({{ manager.Page.InteractiveWidth }})
                </div>

                <el-divider>设计器效果</el-divider>

                <div style="font-size: 32px;">
                  表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格
                </div>

                <el-divider>输出效果</el-divider>

                <div style="font-size: 32px;" :style="calcScale">
                  表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="qyui-cell bdl" style="width:300px">
        <el-form label-width="100px">
          <el-form-item label="页面高度">
            <el-input v-model="manager.Page.PageWidth"></el-input>
          </el-form-item>
          <el-form-item label="页面宽度">
            <el-input v-model="manager.Page.PageHeight"></el-input>
          </el-form-item>
          <el-form-item label="交互高度">
            <el-input v-model="manager.Page.InteractiveHeight"></el-input>
          </el-form-item>
          <el-form-item label="交互宽度">
            <el-input v-model="manager.Page.InteractiveWidth"></el-input>
          </el-form-item>

          <el-form-item label="边距">
            <el-form-item label="上边距">
              <el-input v-model="manager.Page.MarginTop"></el-input>
            </el-form-item>
            <el-form-item label="下边距">
              <el-input v-model="manager.Page.MarginBottom"></el-input>
            </el-form-item>
            <el-form-item label="左边距">
              <el-input v-model="manager.Page.MarginLeft"></el-input>
            </el-form-item>
            <el-form-item label="右边距">
              <el-input v-model="manager.Page.MarginRight"></el-input>
            </el-form-item>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import dialogMixin from '@/mixins/dialogMixin.js';
export default {
  mixins: [dialogMixin],
  inject: ['manager'],
  data() {
    return {
      formData: {
        isBanner: false,
        customizeWidth: 1,
        customizeHeight: 1,

      },
    };
  },
  computed: {
    calcPageSize() {
      return {
        height: this.manager.Page.PageHeight + 'px',
        width: this.manager.Page.PageWidth + 'px',
      };
    },
    calcPageContent() {
      return {
        paddingTop: this.manager.Page.MarginTop + 'px',
        paddingBottom: this.manager.Page.MarginBottom + 'px',
        paddingLeft: this.manager.Page.MarginLeft + 'px',
        paddingRight: this.manager.Page.MarginRight + 'px',
      };
    },
    topPadding() {
      return {
        top: this.manager.Page.MarginTop + 'px',
        position: 'absolute',
        height: '1px',
        width: this.manager.Page.PageWidth + 'px',
        borderTop: '1px solid #ccc',
      };
    },
    bottomPadding() {
      return {
        bottom: this.manager.Page.MarginBottom + 'px',
        position: 'absolute',
        height: '1px',
        width: this.manager.Page.PageWidth + 'px',
        borderBottom: '1px solid #ccc',
      };
    },
    leftPadding() {
      return {
        left: this.manager.Page.MarginLeft + 'px',
        position: 'absolute',
        height: this.manager.Page.PageHeight + 'px',
        width: '1px',
        borderLeft: '1px solid #ccc',
      };
    },
    rightPadding() {
      return {
        right: this.manager.Page.MarginRight + 'px',
        position: 'absolute',
        height: this.manager.Page.PageHeight + 'px',
        width: '1px',
        borderRight: '1px solid #ccc',
      };
    },
    calcScale() {
      const rate = (this.manager.Page.PageWidth - this.manager.Page.MarginLeft - this.manager.Page.MarginRight) / this.manager.Page.InteractiveWidth;
      return {
        transform: 'scale(' + rate + ')',
      };
    },
  },
  methods: {
    changePage(pageSize) {
      switch (pageSize) {
        case 'A3':
          this.manager.Page.PageWidth = 841;// 297/25.4*72
          this.manager.Page.PageHeight = 1190;// 420/25.4*72
          break;
        case 'A4':
          this.manager.Page.PageWidth = 595;// 210/25.4*72
          this.manager.Page.PageHeight = 841;// 297/25.4*72
          break;
        case 'A5':
          this.manager.Page.PageWidth = 419;// 148/25.4*72
          this.manager.Page.PageHeight = 595;// 210/25.4*72
          break;

        case 'B3':
          this.manager.Page.PageWidth = 1000;// 353/25.4*72
          this.manager.Page.PageHeight = 1417;// 500/25.4*72
          break;
        case 'B4':
          this.manager.Page.PageWidth = 728;// 257/25.4*72
          this.manager.Page.PageHeight = 1031;// 364/25.4*72
          break;
        case 'B5':
          this.manager.Page.PageWidth = 498;// 176/25.4*72
          this.manager.Page.PageHeight = 708;// 250/25.4*72
          break;
      }
    },
  },
};
</script>
